import React from "react";
import { Layout, List } from "antd";
import { observer } from 'mobx-react';
import { MessageOutlined, CalendarOutlined } from '@ant-design/icons';

import clientAxiosInstance from "../../request";
import { useStores } from "../../store/store";
// eslint-disable-next-line no-unused-vars
import { BlogInfo } from "../../store/blog";
import { dateFormat } from "../../lib/utils";
import { MAX_COUNT } from "../../lib/config";
import IconText from "./IconText";
import "../CSS/BlogList.less";

const { Content } = Layout;

interface BlogListProps{
    total: number;
}

function BlogList(props: BlogListProps) {
    const { blogList, getNewBlogList } = useStores('blogList') as BlogInfo;
    const { total } = props;
    return (
        <Content id="blogContent">
            <List
                itemLayout="vertical"
                size="large"
                pagination={{
                    onChange: (page) => {
                        getNewBlogList(page, clientAxiosInstance);
                    },
                    pageSize: MAX_COUNT,
                    total,
                }}
                dataSource={blogList}
                renderItem={(item) => (
                    <List.Item
                        key={item.title}
                        actions={[
                            <IconText
                                icon={CalendarOutlined}
                                text={dateFormat(new Date(item.createDate), 'yyyy-MM-dd hh:mm:ss')}
                                key="list-vertical-calendar"
                            />,
                            <IconText
                                icon={MessageOutlined}
                                text={item.commentCount}
                                key="list-vertical-message"
                            />,
                        ]}
                    >
                        <List.Item.Meta
                            style={{ marginBottom: 0 }}
                            title={(
                                <a
                                    className="blogTitle"
                                    href={`/content/${item._id}`}
                                >
                                    {item.title}
                                </a>
                            )}
                        />
                    </List.Item>
                )}
            />
        </Content>
    );
}

export default observer(BlogList);
